<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面加载事件</title>
    <script>
        // 页面加载事件
        // 等待页面所有资源加载完毕，就回去执行回调函数
        // window 是最大的,代表整个页面
        window.addEventListener('load', function () {
            const 按钮1 = document.querySelector('.点击1')
            按钮1.addEventListener('click', function () {
                alert('点击了,按钮1')
            })
        })
        // 代码从上向下执行, JS写在上面 正常是无法执行的. 我们设置 页面加载事件 ,等待所有页面加载完毕 在执行这里的JS代码

        document.addEventListener('DOMContentLoaded', function () {
            const 点击2 = document.querySelector('.点击2')
            点击2.addEventListener('click', function () {
                alert('点击了,按钮2')
            })
        })
    </script>
</head>
<body>
<h3>页面加载事件</h3>
<p>
    加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
</p>
<p>
    为什么要学？ <br>
 有些时候需要等页面资源全部处理完了做一些事情 <br>
 老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不
</p>
<p>
    事件名：load
</p>
<pre style="font-size: 20px;">
监听页面所有资源加载完毕：
给 window 添加 load 事
    // 页面加载事件
    window.addEventListener('load', function () {
        // 执行的操作
    })
</pre>
<p>
    注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件               <br>
    示例, img图片标签                                                  <br>
    img.addEventListener('load', function () {                       <br>
        // 等待图片加载完毕，再去执行里面的代码                               <br>
    })
</p>
<hr>

<p>
    当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，
    而无需等待样式表、图像等完 全加载
</p>
<p>
    事件名：DOMContentLoaded
</p>
<pre style="font-size: 20px;">
监听页面DOM加载完毕：
给 document 添加 DOMContentLoaded 事件

    window.addEventListener('DOMContentLoaded', function () {
        // 执行的操作
    })
</pre>
<hr>

<pre style="font-size: 20px;">
页面加载事件有哪两个？如何添加？
    load 事件
        监听整个页面资源给 window 加
    DOMContentLoaded
        给 document 加
        无需等待样式表、图像等完全加
</pre>
<hr>

<button class="点击1" type="submit">点击1</button>
<button class="点击2" type="submit">点击2</button>

</body>
</html>